<template>
	<view class="blog">
		<view class="topNav">
			<u-tabs
				:list="navList"
				lineWidth="30"
				lineColor="#f56c6c"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				@click="clickNav"
			></u-tabs>
		</view>
		<!-- 数据加载未结束的骨架屏 -->
		<view class="loadingState" v-show="loadState">
			<u-skeleton rows="3" avatar title loading></u-skeleton>
		</view>
		<!-- 博客卡内容 -->
		<view class="content">
			<view class="item" v-for="item in dataList">
				<blog-item :item="item"></blog-item>
			</view>
		</view>
		<!-- 新增博客按钮 -->
		<view class="add">
			<u-icon size="40" name="edit-pen" color="#fff" @click="jumpToPublish"></u-icon>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database(); // 联通数据库
	
	export default {
		data() {
			return {
				navList: [
					{
						name: "最新"
					},
					{
						name: "热门"
					},
				],
				dataList:[],
				loadState: false
			};
		},
		onLoad() {
			this.getBlogData();
		},
		methods: {
			getBlogData() {
				// /建立临时表
				let artTemp = db.collection("blog_article")
					.field("title, user_id, description, picurls, comment_count, view_count, like_count, publish_date")
					.getTemp(); 
				let userTemp = db.collection("uni-id-users")
					.field("_id, username, nickname, avatar_file")
					.getTemp(); // field是写明查哪些字段需要返回; getTimp()是获取临时表中的数据
				
				// 临时表关联, 主表放第一个，从表放第二个， 做get查询
				// orderBy做发布时间的倒序排列
				db.collection(artTemp, userTemp)
					.orderBy("publish_date desc")
					.get()
					.then(res => {
						console.log(res);
						this.dataList = res.result.data;
					})
			},
			clickNav(e) {
				console.log(e);
			},
			jumpToPublish() {
				uni.navigateTo({
					url: "/pages/addBlog/addBlog"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.blog {
	.topNav {
		margin-top:10rpx;
		margin-bottom: 30rpx;
	}
	.loadingState {
		padding: 30rpx;
	} 
	.content {
		.item {
			padding:  30rpx;
			border-bottom: #F7F7F7 15rpx solid;
		}
	}
	.add {
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx rgba(1, 153, 254, 0.6);
		width: 120rpx;
		height: 120rpx;
		background: #3c9cff;
		border-radius: 50%;
		color: #fff;
		position: fixed;
		z-index: 100;
		bottom: 150rpx;
		right: 50rpx;
	}
}
</style>
